<template>
	<view>
		<view class="list wrap">
			<view class="col">
				<view class="left">
					<image src="@/static/admin/icon/info-icon1.png" mode=""></image>
					姓名
				</view>
				<view class="right">
					<input type="text" v-model="form.nickname" placeholder="请输入...">
				</view>
			</view>
			<view class="col">
				<view class="left">
					<image src="@/static/admin/icon/info-icon2.png" mode=""></image>
					头像
				</view>
				<view class="right">
					<uni-file-picker limit="1" :value="fileLists" :del-icon="false" disable-preview :imageStyles="imageStyles"
						@select="select" file-mediatype="image">选择</uni-file-picker>
				</view>
			</view>
			<view class="col">
				<view class="left">
					<image src="@/static/admin/icon/info-icon3.png" mode=""></image>
					性别
				</view>
				<view class="right">
					<picker :value="form.gender" :range="gender" @change="change" range-key="name">
						<view v-if="form.gender===''" class="placeholder">请选择性别
							<uni-icons type="forward" size="16" color="#999"></uni-icons>
						</view>
						<view v-else class="uni-input">{{gender[genderIndex].name}}
							<uni-icons type="forward" size="16" color="#999"></uni-icons>
						</view>
					</picker>
				</view>
			</view>
			<view class="col">
				<view class="left">
					<image src="@/static/admin/icon/info-icon4.png" mode=""></image>
					身份证号
				</view>
				<view class="right">
					<input type="idcard" v-model="form.id_number" placeholder="请输入...">
				</view>
			</view>
			<view class="col">
				<view class="left">
					<image src="@/static/admin/icon/info-icon5.png" mode=""></image>
					手机号
				</view>
				<view class="right">
					<input type="tel" v-model="form.mobile" placeholder="请输入...">
				</view>
			</view>
			<view class="col">
				<view class="left">
					<image src="@/static/admin/icon/info-icon6.png" mode=""></image>
					岗位
				</view>
				<view class="right">
					<picker :value="form.post_id" :range="post" @change="changePost" range-key="name" disabled="true">
						<view v-if="form.post_id===''" class="placeholder">请选择分类
							<uni-icons type="forward" size="16" color="#999"></uni-icons>
						</view>
						<view v-else class="uni-input">{{post[postIndex].name}}
							<uni-icons type="forward" size="16" color="#999"></uni-icons>
						</view>
					</picker>
				</view>
			</view>
			<view class="col">
				<view class="left">
					<image src="@/static/admin/icon/info-icon7.png" mode=""></image>
					家庭住址
				</view>
				<view class="right">
					<input type="text" v-model="form.address" placeholder="请输入...">
				</view>
			</view>
			<view class="submitBtn" @click="submit">
				保存
			</view>
		</view>

	</view>
</template>

<script>
	import {
		domain
	} from "@/utis/request.js"
	export default {
		data() {
			return {
				form: {
					post_id: '',
					gender: ''
				},
				postIndex: '',
				post: [],
				genderIndex: '',
				gender: [{
					id: 1,
					name: "男"
				}, {
					id: 2,
					name: "女"
				}],
				imageStyles: {
					width: 64,
					height: 64,
					border: {
						radius: '50%'
					}
				},
				work_no: null,
				info: {},
				fileLists: []
			}
		},
		onLoad(option) {
			this.getPost()
			this.getInfo()
		},
		methods: {
			getInfo() {
				this.$post("/user/userinfo").then(res => {
					this.form = res.data
					this.fileLists.push({
						url: res.data.avatar
					})
					this.gender.some((item, index) => {
						if (item.gender = res.data.gender) {
							this.genderIndex = index
						}
					})
					this.post.some((item, index) => {
						if (item.post_id = res.data.post_id) {
							this.postIndex = index
						}
					})
				})
			},
			getPost() {
				this.$post("/worker/get_post",{group:1}).then(res => {
					this.post = res.data
				})
			},
			change(e) {
				this.genderIndex = e.detail.value
				this.form.gender = this.gender[e.detail.value].id
			},
			changePost(e) {
				this.postIndex = e.detail.value
				this.form.post_id = this.post[e.detail.value].id
			},
			select(e) {
				e.tempFiles.forEach(item => {
					uni.uploadFile({
						url: domain + 'api/common/upload',
						header: {
							'token': uni.getStorageSync('token'),
						},
						filePath: item.url,
						name: 'file',
						success: (res) => {
							const data = JSON.parse(res.data)
							this.form.avatar = data.data.fullurl
							this.fileLists = [{
								url: data.data.fullurl
							}]
						},
					});
				})
			},
			submit() {
				this.$post("/user/update_userinfo", {
					...this.form
				}).then(res => {
					if (res.code == 200) {
						this.$toast("修改成功")
						setTimeout(() => {
							uni.navigateBack()
						}, 500)
					} else {
						this.$toast(res.msg)
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.list {
		.col {
			padding: 40rpx 0;
			border-bottom: 1rpx solid #e2e2e2;
			font-size: 30rpx;
			display: flex;

			&:last-child {
				border: none;
			}

			.left {
				display: flex;
				align-items: center;
				width: 200rpx;

				image {
					width: 38rpx;
					height: 38rpx;
					margin-right: 15rpx;
				}
			}

			.right {
				width: calc(100% - 200rpx);
				text-align: right;
				color: #808080;

				picker>view {
					display: flex;
					align-items: center;

					.uni-icons {
						margin-left: 18rpx;
					}
				}
			}
		}
	}

	.uni-file-picker__container {
		display: flex;
		justify-content: flex-end;
	}

	.submitBtn {
		margin-top: 80rpx;
	}
</style>